<template>
  <el-scrollbar>
    <div class="mvselect">
      <div class="info">
        <div class="mvselect-con">
          <div class="wycp">
            <div class="mvselect-title">
              <div class="title-left"><i class="el-icon-date"></i><span>网易出品</span></div>
              <div class="title-right">更多<i class="el-icon-arrow-right"></i></div>
            </div>
            <div class="wycp-container">
               <ul>
                 <li class="ellipsis imgli" v-for="item in wycplist" :key="item.id">
                   <div class="wycp-img">
                     <img v-lazy="item.cover"/>
                     <span class="playnum"><i class="el-icon-video-camera"></i>{{item.playCount | filterPlayCount}}</span>
                   </div>
                   <p class="ellipsis">{{item.name}}</p>
                   <p class="ellipsis">{{item.artistName}}</p>
                 </li>
               </ul>
            </div>
          </div>
          <div class="newmv">
            <div class="mvselect-title">
              <div class="title-left"><i class="el-icon-date"></i><span>最新MV</span></div>
              <div class="title-right">更多<i class="el-icon-arrow-right"></i></div>
            </div>
            <div class="wycp-container">
               <ul>
                 <li class="ellipsis imgli" v-for="item in newmvlist" :key="item.id">
                   <div class="wycp-img">
                     <img v-lazy="item.cover">
                     <span class="playnum"><i class="el-icon-video-camera"></i>{{item.playCount}}</span>
                   </div>
                   <p class="ellipsis">{{item.name}}</p>
                   <p class="ellipsis">{{item.artistName}}</p>
                 </li>
               </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>
<script>
  import {getWycp,getNewMV} from '@/api/api'
  export default {
    data() {
      return {
        wycplist:[], //网易出品
        newmvlist:[], //最新MV
      }
    },
    methods:{
      // 网易出品
     _getwycp(){
       getWycp().then(res=>{
         if(res.status == 200){
           this.wycplist = res.data.data;
           // console.log(this.wycplist);
         }
       })
     },

     // 最新MV
     _getnewmv(){
       getNewMV().then(res=>{
         if(res.status == 200){
           this.newmvlist = res.data.data;
           // console.log(this.newmvlist)
         }
       })
     }

    },
    mounted(){
      this._getwycp();
      this._getnewmv();
    }
  }
</script>
<style scoped="scoped">
  .mvselect {
    width: 100%;
    height: auto;
    padding: 20px 28px;
  }

  .mvselect-con {
    width: 100%;
    height: auto;
  }

  .mvselect-title {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #EFEFF2;
  }

  .mvselect-title .title-left {
    color: #333;
    display: flex;
    align-items: center;
    font-size: 15px;
  }

  .mvselect-title .title-left i {
    color: #C62E2E;
    margin-right: 5px;
    font-size: 20px;
  }

  .mvselect-title .title-right {
    color: #999999;
    font-size: 12px;
  }

  /* 网易出品 */
  .wycp{

  }
  .wycp-container{
    width: 100%;
  }
  .wycp-container ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .wycp-container ul li{
    width: 316px;
    height: auto;
    margin-top: 12px;
    margin-bottom: 25px;
  }
  .wycp-container ul li .wycp-img{
    width: 100%;
    height: 178px;
    border: 1px solid #E4E4E7;
    overflow: hidden;
    position: relative;
  }
  .wycp-container ul li .wycp-img img{
    display: block;
    width: 100%;
  }
  .wycp-container ul li p{
    margin-top: 5px;
  }
  .wycp-container ul li p:nth-of-type(1){
    font-size: 15px;
    color: #000000;
  }
  .wycp-container ul li p:nth-of-type(2){
    font-size: 12px;
    color: #999999;
  }

  /* MV右上角播放量 */

</style>
